<template>
  <view>

    <!-- #ifdef APP-PLUS || MP-WEIXIN -->
    <u-navbar v-if="myphone" title="修改手机号" back-icon-color="#000" :is-back="true" title-color="#000"
              :background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
    <u-navbar v-if="!myphone" title="绑定手机号" back-icon-color="#000" :is-back="true" title-color="#000"
              :background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
    <!-- #endif -->

    <view class="phone_box">
      <view v-if="myphone" class="nowphone">当前手机号：{{myphone}}</view>
      <u-form :model="form" ref="uForm">
        <u-form-item label="姓名" prop="nowphone">
          <view class="input_item">
            <u-input v-model="from.newphone" type="number" maxlength="11" :border="false" placeholder="新手机号" />
          </view>
        </u-form-item>
        <u-form-item label="简介" prop="code">
          <view class="input_item">
            <u-input v-model="from.code" type="text" :border="false" placeholder="请输入手机验证码" />
            <view class="getCode" @tap="getCode">{{tips}}</view>
          </view>
        </u-form-item>
      </u-form>
      <view class="lijipay">
        <u-button hover-class="none" type="primary" shape="circle" :ripple="false" :disabled="disabled" :loading="Payloading" @click="lipay()">确定
        </u-button>
      </view>
    </view>

    <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
    </u-verification-code>

  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        newphone: '',
        code: ''
      },
      rules: {
        newphone: [{
          required: true,
          message: '请输入手机号',
          trigger: 'change'
        }],
        code: [{
          required: true,
          message: '请输入验证码',
          trigger: 'change'

        }]
      },
      pass: '',
      pass2: '',
      Payloading: false,
      disabled: false,

      myphone: '',

      tips: '',
      // refCode: null,
      seconds: 60,
    }
  },
  onLoad() {
    this.myphone = uni.getStorageSync('userinfo').username
  },
  methods: {
    lipay() {
      let that = this
      if (that.newphone == '') {
        uni.showToast({
          title: '请输入新手机号',
          icon: 'none',
          duration: 2000
        })
      } else if (that.code == '') {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none',
          duration: 2000
        })
      } else {
        that.Payloading = true
        that.disabled = true
        that.$api.changeBingPhine({
          tel: that.newphone,
          code: that.code
        }).then(res => {
          that.Payloading = false
          that.disabled = false

          uni.showToast({
            title: '更新成功',
            icon: 'none',
            duration: 2000
          })
          setTimeout(()=>{
            uni.navigateBack()
          },2000)

        }).catch(err => {
          that.Payloading = false
          that.disabled = false
          uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 2000
          });
        })
      }
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      let that = this
      if (that.form.newphone == ''){
        uni.showToast({
          title: '请输入手机号',
          icon: 'none',
          duration: 2000
        })
      }else{
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })

          that.$api.GetTixianCode({

          }).then(res => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            this.$u.toast('验证码已发送');
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
          }).catch(err => {
            uni.hideLoading();
            uni.showToast({
              title: err.data.msg,
              icon: 'none',
              duration: 2000
            });
          })

        } else {
          this.$u.toast('倒计时结束后再发送');
        }
      }

    },
    end() {
      //this.$u.toast('倒计时结束');
    },
    start() {
      //this.$u.toast('倒计时开始');
    }
  }
}
</script>

<style lang="scss">
.phone_box {
  padding: 30rpx;
  .u-border-bottom:after{border-bottom-width: 0}
  .nowphone {
    font-weight: bold;
    font-size: 34rpx;
  }

  .input_item {
    border-radius: 200rpx;
    background-color: #f9f9f9;
    padding: 20rpx 40rpx;
    margin: 30rpx 0;
    position: relative;
    display: flex;
    align-items: center;

    u-input {
      flex: 1;
    }

    .getCode {
      //position: absolute;
      right: 0;
      top: 0;
      color: #0084FF;
    }
  }
}

.lijipay {
  width: 90%;
  margin-top: 100rpx;
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 2%;

  .u-size-default {
    height: 80rpx !important;
    line-height: 80rpx !important;
    background-image: linear-gradient(to right, #FE9400, #FF3D22);
    color: #fff;
  }
}
</style>